<template>
  <div :class="[prefixCls + '-saturation-wrapper']" tabindex="0" @keydown.esc="handleEscape" @click="$el.focus()" @keydown.left="handleLeft" @keydown.right="handleRight" @keydown.up="handleUp" @keydown.down="handleDown">
    <div ref="container" :style="bgColorStyle" :class="[prefixCls + '-saturation']" @mousedown="handleMouseDown">
      <div :class="[prefixCls + '-saturation--white']"></div>
      <div :class="[prefixCls + '-saturation--black']"></div>
      <div :style="pointerStyle" :class="[prefixCls + '-saturation-pointer']">
        <div :class="[prefixCls + '-saturation-circle']"></div>
      </div>
    </div>
  </div>
</template>

<script>
import HSAMixin from './hsaMixin';
import Prefixes from './prefixMixin';
import { clamp, getIncrement } from './utils';
import { on, off } from '../../utils/dom';

export default {
  name: 'Saturation',

  mixins: [HSAMixin, Prefixes],

  data() {
    const normalStep = 0.01;

    return {
      left: -normalStep,
      right: normalStep,
      up: normalStep,
      down: -normalStep,
      multiplier: 10,
      powerKey: 'shiftKey'
    };
  },

  computed: {
    bgColorStyle() {
      return { background: `hsl(${this.value.hsv.h}, 100%, 50%)` };
    },
    pointerStyle() {
      return { top: `${-(this.value.hsv.v * 100) + 1 + 100}%`, left: `${this.value.hsv.s * 100}%` };
    }
  },

  methods: {
    change(h, s, v, a) {
      this.$emit('change', { h, s, v, a, source: 'hsva' });
    },
    handleSlide(e, direction, key) {
      e.preventDefault();
      e.stopPropagation();

      const isPowerKey = e[this.powerKey];
      const increment = isPowerKey ? direction * this.multiplier : direction;
      const { h, s, v, a } = this.value.hsv;
      const saturation = clamp(s + getIncrement(key, ['left', 'right'], increment), 0, 1);
      const bright = clamp(v + getIncrement(key, ['up', 'down'], increment), 0, 1);

      this.change(h, saturation, bright, a);
    },
    handleChange(e) {
      e.preventDefault();
      e.stopPropagation();

      const { clientWidth, clientHeight } = this.$refs.container;
      const left = clamp(this.getLeft(e), 0, clientWidth);
      const top = clamp(this.getTop(e), 0, clientHeight);
      const saturation = left / clientWidth;
      const bright = clamp(1 - top / clientHeight, 0, 1);

      this.change(this.value.hsv.h, saturation, bright, this.value.hsv.a);
    },
    handleMouseDown(e) {
      HSAMixin.methods.handleMouseDown.call(this, e);
      //            window.addEventListener('mouseup', this.handleChange, false);
      on(window, 'mouseup', this.handleChange);
    },
    unbindEventListeners(e) {
      HSAMixin.methods.unbindEventListeners.call(this, e);
      //            window.removeEventListener('mouseup', this.handleChange);
      off(window, 'mouseup', this.handleChange);
    }
  }
};
</script>
